<template>
  <div>
    <div class="content">
     
      <div class="area">
        <div style="width: 96%;margin: 0 auto;">
          <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
          <el-tab-pane label="充值模版" name="first">
            <el-button type="primary" @click="btnAdd">添加参数模版</el-button>
            <div class="table-area">
          <el-table
            border
            :data="dataList2"
            stripe
            style="width: 100%"
           
          >
            <el-table-column
              prop="id"
              align="center"
              label="id"
              #default="scope"
              
            >
             
            </el-table-column>
            <el-table-column
              prop="title"
              align="center"
              label="模版名称"
              #default="scope"
              
            >
              
            </el-table-column>
            <el-table-column
              prop="_type_text"
              align="center"
              label="类型"
              #default="scope"
              
            >
              
            </el-table-column>
            <el-table-column
              prop="_isshare_text"
              align="center"
              label="是否共享代理供货商品"
              #default="scope"
              
            >
              
            </el-table-column>

            <el-table-column
              align="center"
              fixed="right"
              label="操作"
              
            >
              <template #default="scope">
                <div
                  :style="
                    isMobile ? 'display: flex; flex-direction: column;' : ''
                  "
                >
                <el-button
                    type="primary"
                    
                    size="small"
                    @click="edintDate(scope.row)"
                    style="margin-bottom: 5px"
                    >编辑</el-button
                  >
                 
                  <el-button
                    type="danger"
                    plain
                    size="small"
                    @click="handleDelete(scope.row.id)"
                    >删除</el-button
                  >
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
 
        <!-- 新增分页组件 -->
        <div class="pagination-container">
          <el-pagination
            :current-page="currentPage"
            :page-size="pageSize"
            :total="total"
            :page-sizes="[10, 20, 30, 50]"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handlePageSizeChange"
            @current-change="handleCurrentPageChange"
          />
        </div>
          </el-tab-pane>
         
     
 
        </el-tabs>
        </div>
      
      </div>
    </div>
        <!-- 定价模版新增 -->
        <el-dialog
      v-model="mobanShow"
      :show-close="false"
      draggable
      :title="titleName"
      width="56%"
    >
      <div class="img-area">
        <div>
          <div class="jibies">
            <el-form-item label="模版名称" style="margin-left: 28px;">
              <el-input v-model="tplname" style="width: 500px" />
            </el-form-item>
          </div>
          <div class="jibies">
            <el-form-item label="代理共享商" style="margin-left: 15px;">
                <el-radio-group v-model="isshare">
                <el-radio :label="1">共享</el-radio>
                <el-radio :label="2">不同享</el-radio>
               
              </el-radio-group>
            </el-form-item>
            
          </div>

          <el-button type="primary" @click="addTable">新增</el-button>
          <div class="jibies" style="margin-top:22px">
 
              <el-table :data="tableData" style="width: 100%" max-height="250">
              <el-table-column fixed prop="date" label="输入类型" >
                <template #default="{ row }">
                <el-select v-model="row.condition" class="m-2">
                  <el-option
                    v-for="item in inputOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </template>

              </el-table-column>
              <el-table-column prop="name" label="参数名称"  >
                <template #default="{ row }">
                  <el-input v-model="row.tplusername"  />
              </template>
                
              </el-table-column>
              <el-table-column prop="address" label="提示文本"  >
                <template #default="{ row }">
                  <el-input v-model="row.title_tip"  />
              </template>
              </el-table-column>
              <el-table-column prop="cc" label="验证规则"  >
                <template #default="{ row }">
                <el-select v-model="row.type" class="m-2">
                  <el-option
                    v-for="item in inputOptions2"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </template>
              </el-table-column>
          
              <el-table-column fixed="right" label="操作">
                <template #default="scope">
                  <el-button
                    link
                    type="primary"
                    size="small"
                    @click.prevent="deleteRow(scope.$index)"
                  >
                    删除
                  </el-button>
                </template>
    </el-table-column>
             </el-table>
      
          </div>
       
        </div>
		
      </div>
	  <div class="footers">
			<el-button type="primary" plain @click="mobanClose">取消</el-button>
            <el-button type="primary" @click="btnOk">保存</el-button>
		</div>
    </el-dialog>

 
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref, onMounted, onBeforeUnmount } from "vue";
import {
  tplList,tplSave
} from "~/base/api/product/productTemplate.ts";
const activeName=ref('first')
const mobanShow=ref(false)
const radio=ref('')
const pageSize=ref(10)
const currentPage=ref(1)
const total=ref(0)
const isshare=ref(1)
const titleName=ref("添加")
const tplname=ref("")
const id=ref("")
const inputOptions=ref([
  {
    value:1,
    label:'所有格式'
  },
  {
    value:2,
    label:'纯数字'
  },
  {
    value:3,
    label:'QQ号'
  },
  {
    value:4,
    label:'手机号'
  },
  {
    value:5,
    label:'邮箱'
  },
  {
    value:6,
    label:'网址'
  },
  {
    value:7,
    label:'手机号或QQ号'
  },
])
const inputOptions2=ref([

    {
        "label":"文本框","value":"text"
    },
    {
        "label":"密码框","value":"password"
    },
    {
        "label":"下拉框","value":"select"
    },
    {
        "label":"卡卡缴费二级联动","value":"select_kaka"
    },
    {
        "label":"图片","value":"image"
    },

])
const tableData = ref(
  [
    {
      name:"",
      tplusername:"",
      title_tip:"",
    }
]
)

//打开编辑
function edintDate(e){
  mobanShow.value=true
  tableData.value=e.content
  tplname.value=e.tplname
  isshare.value=Number(e.isshare)

  id.value=e.id
}
//清空
function clearList(){
  tplname.value=''
  isshare.value=1
  tableData.value=[]
  id.value=''
}
//保存
function btnOk(){
  let parm={
    tplname:tplname.value,
    isshare:isshare.value,
    content:tableData.value,
    id:id.value
  }
  tplSave(parm).then((res)=>{
    if(res.code ==200){
      mobanShow.value=false
      gettplList()
      ElMessage({
        message: res.msg,
        type: 'success',
      })
    }else{
      ElMessage({
        message: res.msg,
        type: 'warning',
      })
    }
  }).catch((err)=>{
    ElMessage({
        message: res.msg,
        type: 'warning',
      })
  })
}
//新增table
function addTable(){
  let parm={
    condition:"",
      tplusername:"",
      title_tip:"",
      type:"",
  }
  tableData.value.push(parm)
}
const dataList2=ref([

])
const deleteRow = (index: number) => {
  tableData.value.splice(index, 1)
}
const options=ref(
  [
  {
    value: 'Option1',
    label: 'Option1',
  },
  {
    value: 'Option2',
    label: 'Option2',
  },

]
)
//打开新增
function btnAdd(){
  mobanShow.value=true
  clearList()
  titleName.value='添加'
}
function mobanClose(){
  mobanShow.value=false
}

//初始化
onMounted(()=>{
  gettplList()
})
//列表
function gettplList(){
  let parm={
    limit:pageSize.value,
    page:currentPage.value
  }
  tplList(parm).then((res)=>{
    if(res.code ==200){
      total.value=Number(res.data.count)
      dataList2.value=res.data.data

    }
  })
}
//分页
function handlePageSizeChange(e){
  pageSize.value=e
  gettplList()
}
function handleCurrentPageChange(e){
  currentPage.value=e
  gettplList()
}
</script>
<style>
.el-input.is-disabled .el-input__wrapper {
  background: white !important;
}</style>
<style scoped>
.deep .el-input.is-disabled .el-input__wrapper {
  background: white !important;
}

.table-area {
  width: 98%;
  margin: 0 auto;
  margin-top: 30px;
}

.tab-header {
  display: flex;
  width: 100%;
}

.area {
  width: 100%;
  background-color: white;
  padding-bottom: 28px;
  margin-top: 18px;
  padding-top: 14px;
}

.content {
  width: 96%;
  margin: 0 auto;
  height: 80vh;
  margin-top: 26px;
}

.header {
  background-color: white;
  padding: 17px 0 1px 12px;
  border-radius: 8px;
}

.is-loading {
  animation: rotating 2s linear infinite;
}

@keyframes rotating {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.footers{
  display: flex;
    justify-self: center;
    padding-bottom: 20px;
    margin-bottom: 20px;
    position: relative;
    top: 30px
}

/* 基础响应式设置 */
.content {
  width: 96%;
  margin: 0 auto;
  margin-top: 26px;
  padding-bottom: 20px;
}

/* 表格区域响应式 */
.table-area {
  width: 100%;
  margin: 0 auto;
  margin-top: 20px;
  overflow-x: auto;
}

/* 分页容器 */
.pagination-container {
  display: flex;
  justify-content: center;
  margin-top: 20px;
  overflow-x: auto;
}

/* 对话框内容 */
.diolog-content {
  padding: 10px;
}

/* 标签页区域 */
.tabs-area {
  margin-top: 12px;
}

/* 配置区域 */
.configurations {
  margin-top: 12px;
}

/* 对话框底部按钮 */
.dialog-footer {
  margin: 20px auto 0;
  text-align: center;
}
.nameshopping {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 70px;
  cursor: pointer;
  text-align: center;
}
.nameshopping:hover {
  color: #1890ff;
}
/* 订单区域 */
.order-area {
  width: 100%;
  padding: 12px;
  border: 1px solid #409eff;
  background-color: #e8f4ff;
  box-sizing: border-box;
}

/* 刷新按钮样式 */
.shuaxin {
  font-size: 12px;
  color: #409eff;
  padding-right: 2px;
  cursor: pointer;
}

/* 加载动画 */
.is-loading {
  animation: rotating 2s linear infinite;
}

@keyframes rotating {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* 响应式调整 */
@media (max-width: 768px) {
  /* 头部表单 */
  .header {
    padding: 10px;
  }

  /* 表单项目 */
  .el-form-item {
    width: 100%;
    margin-right: 0;
    margin-bottom: 10px;
  }

  /* 标签页 */
  .el-tabs {
    overflow-x: auto;
  }

  /* 对话框内容 */
  .diolog-content {
    padding: 5px;
  }

  /* 输入框宽度 */
  .el-input {
    width: 100% !important;
  }

  /* 表格操作按钮 */
  .el-table-column--fixed-right .el-button {
    margin-bottom: 5px;
  }

  /* 标签页头 */
  .tab-header {
    flex-direction: column;
  }

  .tabs {
    margin: 5px 0;
  }

  /* 对话框标题 */
  .el-dialog__title {
    font-size: 16px;
  }
}

/* PC端特定样式 */
@media (min-width: 769px) {
  .content {
    /* max-width: 1200px; */
  }

  .table-area {
    width: 98%;
  }

  .diolog-content {
    min-width: 500px;
  }

  .el-form--inline .el-form-item {
    margin-right: 10px;
  }
}
</style>
